<template>
<div>
    <el-table :data="log" size="mini" style="width: 100%" empty-text="暂无日志信息" stripe>
      <!-- 时间 -->
      <el-table-column prop="time" label="Time" width="140"></el-table-column>
      <!-- 信息 -->
      <el-table-column prop="message" label="Message">
      </el-table-column>
      <!-- 触发页面 -->
      <el-table-column label="Url" align="center" min-width="200">
        <template slot-scope="scope">
          {{get(scope.row, 'meta.url')}}
        </template>
      </el-table-column>
      <!-- 触发组件 -->
      <el-table-column label="Tag" align="center" min-width="120">
        <template slot-scope="scope">
          <el-tag
            v-if="get(scope.row, 'meta.instance.$vnode.componentOptions.tag')"
            type="info" size="mini">
            &#60;{{get(scope.row, 'meta.instance.$vnode.componentOptions.tag')}}&gt;
          </el-tag>
        </template>
      </el-table-column>
      <!-- 查看详情 -->
      <el-table-column fixed="right" align="center" label="More" width="100">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleShowMore(scope.row)">
            <d2-icon name="eye"/>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <template slot="footer">
      <el-button type="primary" size="mini" :loading="uploading" @click="handleUpload">
        <d2-icon name="cloud-upload"/>
        Upload {{log.length}} log data
      </el-button>
    </template>
    </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {get} from 'lodash'

  export default {
    data() {
      return {
        uploading: false
      }
    },
    computed: {
      ...mapState('d2admin/log', [
        'log'
      ])
    },
    methods: {
      get,
      handleShowMore(log) {
        // 打印一条日志的所有信息到控制台
        this.$notify({
          type: 'info',
          title: '日志详情',
          message: '完整的日志内容已经打印到控制台'
        })
        this.$log.capsule('D2Admin', 'handleShowMore', 'primary')
        console.group(log.message)
        console.log('time: ', log.time)
        console.log('type: ', log.type)
        console.log(log.meta)
        console.groupEnd()
      },
      // 日志上传
      handleUpload() {
        this.uploading = true
        this.$notify({
          type: 'info',
          title: '日志上传',
          message: `开始上传${this.log.length}条日志`
        })
        setTimeout(() => {
          this.uploading = false
          this.$notify({
            type: 'success',
            title: '日志上传',
            message: '上传成功'
          })
        }, 3000)
      }
    }
  }
</script>
